<template>
  <div class="persondata">
    <div class="line">
      <span>|</span>
      <span>{{ cropName }}</span>
    </div>
    <div class="header">
      <div class="left">
        <el-date-picker
          v-model="startvalue"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始时间"
        />
        <el-date-picker
          v-model="endvalue"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="结束时间"
        />
        <el-select v-model="reviewStatus" placeholder="请选择" @change="ChangeValue">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="inputName" placeholder="请输入实训报告名称" style="width:200px" />
        <el-button size="medium" @click="handleSearch(inputName)">搜索</el-button>
      </div>
      <div class="right">
        <el-button type="danger" size="small" icon="el-icon-delete" @click="handledelete">删除</el-button>
        <el-button type="primary" size="small" icon="el-icon-arrow-left" @click="goback">返回</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="77"
        />
        <el-table-column
          label="序号"
          width="130"
          type="index"
          :index="indexNumber"
        >
        <!-- <template slot-scope="scope">{{ scope.row.num }}</template> -->
        </el-table-column>
        <el-table-column
          prop="trainingReportName"
          label="实训报告名称"
          width="130"
        />
        <el-table-column
          prop="studentName"
          label="提交人"
          width="120"
        />
        <el-table-column
          prop="gradeName"
          label="年级"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="className"
          label="班级"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="score"
          label="得分"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="reviewStatus"
          label="评阅状态"
          width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="batch"
          label="批次"
          width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createTime"
          label="提交时间"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleLook(scope.$index, scope.row)"
            >查看</el-button>
            <el-button
              size="mini"
              @click="handlecheckout(scope.$index, scope.row)"
            >批阅</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handledeleteOne(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getReportList } from '@/api/report'
import { deleteReportDetail } from '@/api/report'
import { AddReportDetail } from '@/api/report'
import { deleteMoreReport } from '@/api/report'

export default {
  name: 'Persondata',
  data() {
    return {
      cropId: '',
      cropName: '',
      sutdentId: '',
      role: '',
      inputName: '',
      reviewStatus: '',
      startvalue: '',
      endvalue: '',
      tableData: [],
      multipleSelection: [],
      options: [
        {
          value: '',
          label: '全部状态'
        },
        {
          value: '待评语',
          label: '待评语'
        },
        {
          value: '已评阅',
          label: '已评阅'
        }],
      dialogFormVisible: false,
      form: {
        name: '',
        batch: '',
        fileList: []
      },
      formLabelWidth: '120px',
      listLoading: true
    }
  },
  created() {
    this.cropId = this.$route.params.cropId
    this.cropName = this.$store.getters.cropName
    this.studentId = this.$route.params.studentId
    const studentnewData = {
      cropId: this.cropId,
      studentId: this.studentId,
    }
    getReportList(studentnewData).then(res => {
      this.tableData = res.data.records
      this.listLoading = false
    })
    this.role = this.$store.getters.roles[0]
    console.log(this.role)
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    indexNumber(index) {
      return index + 1
    },
    newfetch() {
      this.listLoading = true
      this.cropId = this.$route.params.cropId
      const newData = {
        cropId: this.cropId,
        studentId: this.$store.getters.id
      }
      getReportList(newData).then(res => {
        this.tableData = res.data.records
        this.listLoading = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleLook(index, row) { // 跳转到个人数据详情页面
      this.$router.push(`/trainning/lookReport/${row.trainingReportId}`)
      console.log(row)
    },
    addData() { // 跳转到新增数据页面

    },
    handledeleteOne(index, row) {
      console.log(row.trainingReportId)
      const deleteData = {
        trainingReportId: row.trainingReportId
      }
      deleteReportDetail(deleteData).then(res => {
        console.log(res)
      })
      this.newfetch()
    },
    handlecheckout(index, row) {
      console.log(index, row)
      this.$router.push(`/trainning/correctReport/${row.trainingReportId}`)
    },
    handledelete() {
      console.log(this.cropId)
      console.log(this.multipleSelection)
    },
    handleChange(file, fileList) {
      this.form.fileList = fileList.slice(-3)
    },
    handleSearch(inputName) {
      this.listLoading = true
      const searchData = {
        cropId: this.cropId,
        studentId: this.$store.getters.id,
        endTime: this.endvalue,
        startTime: this.startvalue,
        reviewStatus: this.reviewStatus,
        trainingReportName: this.inputName
      }
      if (searchData.endTime == '') {
        delete searchData.endTime
      }
      if (searchData.startTime == '') {
        delete searchData.startTime
      }
      if (searchData.reviewStatus == '') {
        delete searchData.reviewStatus
      }
      if (searchData.trainingReportName == '') {
        delete searchData.trainingReportName
      }
      console.log(this.reviewStatus)
      getReportList(searchData).then(res => {
        this.tableData = res.data.records
        this.listLoading = false
        console.log(res)
      })
    },
    ChangeValue() {
      this.listLoading = true
      const searchData = {
        cropId: this.cropId,
        studentId: this.$store.getters.id,
        reviewStatus: this.reviewStatus
      }
      console.log(this.reviewStatus)
      getReportList(searchData).then(res => {
        this.tableData = res.data.records
        this.listLoading = false
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>
    .line{
        width: 100%;
        color: #345E8F;
        font-size: 16px;
        margin-bottom: 1%;
    }
    span:first-child{
        font-weight: bold;
        margin-right: 1%;
        font-size: 18px;
    }
    .header{
        display: flex;
        justify-content: space-between;
        margin-bottom: 1%;
    }
    .left{
        display: flex;
        justify-content: flex-start;
    }
    .dialog-footer{
      text-align: center;
    }
</style>
